<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        a: <input type="text" v-model="a" /><br>
        b: <input type="text" v-model="b" /><br>
        a乘以b的值是 {{total}}<hr>
        搜索 <input type="text" v-model="searchstr" /> {{userobj}}
    </div>
    <script>
        // 计算a乘以b的值 ----> 过1秒之后计算 a*b的值；
        // 通过watch监听属性
        //练习： input 框 搜索姓名  ---》过1s之后显示 姓名和年龄
        new Vue({
            el: "#app",
            data: {
                a: 2,
                b: 3,
                searchstr:"",
                total: 6,
                userobj:null,
                users: [{ name: "张三", age: 20 }, { name: "李四", age: 23 }, { name: "王五", age: 22 }]
            },
            // computed不支持异步
            // computed:{
            //     total:function(){
            //         setTimeout(() => {
            //             console.log("setTimeout");
            //             return this.a *this.b;
            //         }, 1000);
            //     }
            // }
            watch: {
                a: function (newvalue) {
                    setTimeout(() => {
                        if (this.b != "" && newvalue != "") {
                            this.total = this.b * newvalue;
                        }
                    }, 1000);
                },
                b: function (newvalue) {
                    setTimeout(() => {
                        this.total = this.a * newvalue;
                    }, 1000);
                },
                searchstr:function(newvalue){
                    setTimeout(() => {
                       let res =  this.users.filter(item=>item.name==newvalue)[0];
                       this.userobj = res;
                    }, 1000);
                }
            }

        })


    </script>
</body>

</html>